<template>
  <view class="location">
    <uni-transition ref="ani" custom-class="transition" mode-class="slide-top" :show="show">
      <view class="toast" :style="{ marginTop }">
        <image src="@/static/icon/errToast.png" mode="scaleToFill" class="icon" />
        <text>{{ title }}</text>
      </view>
    </uni-transition>
  </view>
</template>

<script lang="ts" setup>
defineProps({
  title: {
    type: String,
    default: '未知错误!',
  },
  marginTop: {
    type: String,
    default: '220rpx',
  },
})
let show = ref(true)
onMounted(() => {
  setTimeout(() => {
    show.value = false
  }, 2000)
})
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'CustomFont';
  src: url('../../static/icon/iconfont.ttf');
}

.location {
  position: fixed;
  z-index: 9999;
  width: 100%;

  .toast {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 40rpx;
    height: 60rpx;
    margin: auto;
    width: fit-content;
    font-size: 24rpx;
    border-radius: 14rpx;
    background-color: #f4cbd3;

    .icon {
      width: 30rpx;
      height: 30rpx;
    }

    text {
      margin-left: 15rpx;
    }
  }
}
</style>
